<template>
    <el-container>
        <div style="text-align: center;margin-left: 25%">

            <el-upload
                :auto-upload="false"
                :http-request="uploadFile"
                ref="upload"
                drag
                :on-success="fileclear"
                action="/v1/file/push"
                clearFiles
                accept=".ttf,.TTF"
                style="margin-top:35%;margin-left:2.5%">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传ttf文件</div>
            </el-upload>


            <div>
                <el-input v-model="input" placeholder="请输入内容" maxlength="10" style="width: 50%;" clearable show-word-limit></el-input>
                <el-button @click="submitUpload()">svgTest</el-button> 
            </div>
            <div>
                <el-color-picker v-model="colors" color-format="hex"></el-color-picker>
            </div>
            <div style="width: 50%;margin-left: 24.5%" >
                <el-slider
                  v-model="size"
                  show-input 
                  :min="5"
                  :max="34">
                </el-slider>
            </div>
            

        </div>
        <div style="text-align: center;padding: 50px; margin-top: 10%;">
            <div>
                <a class='download' :href='zippath' download=""  title="下载zip包" v-if="zippath!='' " style="margin-top: 20px">打包下载</a>
            </div>
            <div>
                <div v-for="item in svgs" style="display:inline;height: 500px" >
                    <img :src="item" :style="'width:'+(size*5)+'px'">
                </div>
            </div>

        </div>
    </el-container>
</template>

<script>
import {svgApi,svgsingle} from '../../api/autopay'; 
import axios from 'axios'; 
export default {
    name: '',
    data(){
        return {
            visible: false,
            input : "测试",
            size:10,
            svgs:[],
            zippath:"",
            ServiceIP:"",
            colors: "#000000",
            fileData: new FormData(),
            svgMod: "20210430145358",
            options: [
                {
                    value: '20210430145358',
                    label: '黑色字体'
                }, 
                {
                    value: '20210430113149',
                    label: '绿色字体'
                },{
                    value:"20210430154754",
                    label:"红色"
                }
            ]
        }
    },
    mounted:function () {
        this.GetServiceIP();
    },
    methods: {
        GetServiceIP(){
            var that = this;
            that.ServiceIP = document.location.origin;
        },
        uploadFile(f){
            // savepath
            this.fileData.append("file",f.file);
        },
        submitUpload() {
            var that = this;
            that.loads = true
            that.$refs.upload.submit();
            this.fileData.append("word", that.input)
            this.fileData.append("color",that.colors.replace("#",""))
            axios.post("/v1/svgApi/svgsingle",that.fileData,{ retryDelay: 8000 }).then( 
                res => {
                    let { code, msg, data } = res;
                    if (data.code == 200){
                        that.$message("上传成功")
                        that.svgs = []
                        var words = that.input.split('')
                        var tmp = data.data.replace(/'/g,"\"")
                        var res = JSON.parse(tmp)
                        that.zippath = that.ServiceIP+"/"+res.zip_path;
                        for (var i = 0; i < words.length ; i++) {
                           var u = words[i].charCodeAt(0).toString(16)
                           var tmpurl = that.ServiceIP+"/"+res.save_path+"/uni"+u.toUpperCase()+".svg"
                           that.svgs.push(tmpurl)
                           console.log(tmpurl);
                        }
                    }else{
                        that.$message.error("上传失败");
                        that.loads = false
                    }
                }).catch(function(error) {
                    console.log(error);
                    that.loads = false
                    that.$message.error("数据请求失败");
            });
            that.fileData =  new FormData();
        },
        show(input){
            var that = this;
            var words = input.split('')
            that.svgs = []
            console.log(words);
            for (var i = 0; i < words.length ; i++) {
               var u = words[i].charCodeAt(0).toString(16)
               that.svgs.push(that.ServiceIP+"/svg/"+that.svgMod+"/uni"+u.toUpperCase()+".svg")
            }
        }


    }//methods
}
</script>

<style type="text/css">
    html {
    font-size: (16 / 3.75) vw;
}

</style>
